<template>
  <div class="inputWrapper">
    <!-- 未激活 -->
    <div class="disable" v-if="!isShowTextarea">
      <input type="text" placeholder="写跟帖" @focus="showTextarea" :value="content" />
      <div class="commentWrapper">
        <span class="iconfont iconpinglun-"></span>
        <div class="num">1024</div>
      </div>
      <span class="iconfont iconshoucang" ref="iconshoucang" @click="collect($route.query.id)"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 已激活 -->
    <div class="inputActive" v-if="isShowTextarea">
      <textarea rows="3" @blur="hideTextarea" ref="textarea" v-model="content"></textarea>
      <div class="sendBtn" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
// 引入事件总线
import Bus from "../util/Bus";

export default {
  data() {
    return {
      isShowTextarea: false,
      content: "",
      parent_id: "",
    };
  },

  created() {
    // 监听总线发来的事件
    // $on有两个参数,第一个是自定义事件名,第二个是回调函数,可以接受到触发事件时带上的参数
    Bus.$on("reply", (id) => {
      // console.log("我是回复", id);
      this.parent_id = id;
      this.showTextarea();
    });
  },
  methods: {
    // 显示大输入框
    showTextarea() {
      // input聚焦,isshowttextarea为true,显示大输入框
      this.isShowTextarea = true;
      // 执行完数据修改,dom暂时还没存在,最简单用setTimeout延时,弊端时间是猜测的
      // vue给出一个函数,将一段代码延迟这次渲染结束
      // 下一个循环才执行this.$nextTick传入一个回调函数即可
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    // 隐藏大的输入框
    hideTextarea() {
      // 这里是隐藏输入框, 但是可能是点击发送按钮触发的
      // 所以不能马上隐藏,等到click 触发完之后再执行
      setTimeout(() => {
        // 大输入框失去焦点,isshowtextarea变回false
        this.isShowTextarea = false;
        // 失去焦点清空id
        this.parent_id = "";
      }, 50);
    },
    // 发布
    send() {
      // console.log(this.content);  评论内容
      // console.log(this.$route.query.id);  获取文章id
      if (!this.content) {
        return;
      }
      this.$axios({
        method: "post",
        url: "/post_comment/" + this.$route.query.id,
        data: {
          content: this.content,
          parent_id: this.parent_id, //parent_id 参数忘了带会一直回复主评论
        },
      }).then((res) => {
        console.log(res);
        this.content = "";
        this.$emit("reloadComments");
        // this.parent_id=''  也可在发送文章后清空id
      });
    },
    // 收藏事件
    collect(id) {
      // console.log(this.$refs.iconshoucang);

      this.$axios({
        url: "/post_star/" + id,
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "收藏成功") {
          this.$toast("收藏成功");
          this.$refs.iconshoucang.style.color = "yellow";
        } else {
          this.$toast("取消收藏");
          this.$refs.iconshoucang.style.color = "#888";
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #e4e4e4;
  .disable {
    display: flex;
    padding: 10/360 * 100vw;
    justify-content: space-between;
    input {
      padding: 0 10/360 * 100vw;
      width: 178/360 * 100vw;
      height: 30/360 * 100vw;
      font-size: 12/360 * 100vw;
      box-sizing: border-box;
      line-height: 30/360 * 100vw;
      border: none;
      outline: none;
      background-color: #bbb;
      border-radius: 16/360 * 100vw;
    }
    .iconfont {
      font-size: 24/360 * 100vw;
    }
    .commentWrapper {
      position: relative;
      .num {
        position: absolute;
        top: -4/360 * 100vw;
        left: 18/360 * 100vw;
        font-size: 12/360 * 100vw;
        color: #ffffff;
        background-color: red;
        padding: 1px 4/360 * 100vw;
        border-radius: 6/360 * 100vw;
      }
    }
  }
  .inputActive {
    display: flex;
    align-items: flex-end;
    textarea {
      flex: 1;
      border: none;
      outline: none;
      padding: 5/360 * 100vw 12/360 * 100vw;
      border-radius: 10/360 * 100vw;
      background-color: #bbb;
    }
    .sendBtn {
      background: red;
      margin-left: 20/360 * 100vw;
      line-height: 20/360 * 100vw;
      padding: 0 10/360 * 100vw;
      border-radius: 14/360 * 100vw;
      font-size: 12/360 * 100vw;
      color: #fff;
    }
  }
}
</style>